<!DOCTYPE html>
<html lang="en">
<head>
    <title>保险种类</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/laypage.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/laypage/laypage.js" charset="utf-8"></script>
    <script src="/js/vue/vue.min.js"></script>
    <script src="/js/layer/layer.js" charset="utf-8"></script>
</head>
<body>
<script src="/js/webSocket.js"></script>
<section id="container">
<#include "sider.ftl">
    <section id="main-content">
        <section class="wrapper">
            <div class="table-agile-info">
                <div class="panel panel-default" id="app">
                    <div class="panel-heading">
                        保险套餐信息
                    </div>
                    <section class="panel">
                    <#--搜索框-->
                        <header class="panel-heading wht-bg">
                            <h4 class="gen-case">
                                <form action="#" class="pull-right mail-src-position">
                                    <div class="input-append">
                                        <input type="text" class="form-control search" placeholder="请输入套餐名称"
                                               id="keyword" name="keyword">
                                    </div>
                                </form>
                            </h4>
                        </header>
                        <div class="panel-body minimal">
                            <div class="table-inbox-wrap">
                                <table class="table table-inbox table-hover">
                                    <thead>
                                    <tr>
                                        <th style="width:10px;">
                                            <label class="i-checks m-b-none">
                                                <input type="checkbox" id="checkAll" name="checkAll">
                                            </label>
                                        </th>
                                        <th style="width:10px;">ID</th>
                                        <th style="width:10px;">套餐名称</th>
                                        <th style="width:10px;">套餐内容</th>
                                        <th style="width:10px;">套餐基础金额</th>
                                        <th style="width:10px;">套餐优惠率 </th>
                                        <th style="width:10px;">保险状态</th>
                                        <@shiro.hasAnyRoles name="admin,manager">
                                        <th style="width:10px;">操作</th>
                                        </@shiro.hasAnyRoles>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr v-for="(item,index) in result">
                                        <td>
                                            <label class="i-checks m-b-none">
                                                <input type="checkbox" class="inputBox" v-bind:value="item.comuuid">
                                            </label>
                                        </td>
                                        <td>
                                            <span class="text-ellipsis">{{index+1}}</span>
                                        </td>
                                        <td>
                                            <span class="text-ellipsis">{{item.combname}}</span>
                                        </td>
                                        <td>
                                            <table>
                                                <tr class="active" v-for="(items,index) in item.list">
                                                    <td>{{items.insurname}}</td>
                                                </tr>
                                            </table>
                                        </td>
                                        <td>
                                            <span class="text-ellipsis">{{item.combprice}}</span>
                                        </td>
                                        <td>
                                            <span class="text-ellipsis">{{item.combrate}}</span>
                                        </td>

                                        <td>
                                            <span v-if="item.combstate==0" style="color:#f0ad4e;">待审核</span>
                                            <span v-if="item.combstate==1" style="color:#5bc0de">已上架</span>
                                            <span v-if="item.combstate==2" style="color:#428bca">审核未通过</span>
                                            <span v-if="item.combstate==3" style="color:#d9534f">已下架</span>
                                        </td>
                                        <@shiro.hasAnyRoles name="admin,manager">
                                        <td>
                                            <input   class="btn btn-success"  type="button" @click="delEvent(item.comuuid)"  value="下架">
                                            <input class="btn btn-danger" type="button" @click="updateEvent(item.comuuid)"  value="修改">
                                        </td>
                                        </@shiro.hasAnyRoles>
                                    </tr>
                                    <tr>
                                    <@shiro.hasAnyRoles name="admin,manager">
                                        <td>
                                            <input type="button" id="delCombos" value="批量删除">
                                        </td>
                                    </@shiro.hasAnyRoles>
                                        <td colspan="8">
                                            <div id="pageNav"></div>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </section>
                </div>
            </div>
        </section>
    <#include "foot.ftl"><#--引入底部-->
    </section>
</section>
</body>
</html>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            result: []
        }
    });
    var getComboList = function (curr){
        $.ajax({
            url: "/comb/toGetComb",
            type: "post",
            dataType: "json",
            data: {
                pageSize: 5,
                pageNum: curr || 1,
                keyword: $("#keyword").val()
            },
            success: function (data) {
                app.result = data.page;

                laypage({
                    cont: 'pageNav',  //分页容器
                    pages: data.totalPage, //总页数
                    skin: '#336699',
                    first: '第一页',
                    last: '最后一页',
                    curr: curr || 1,
                    jump: function(obj, first){
                        if (!first) {
                            getComboList(obj.curr);
                        }
                    }
                });
            }
        });
    };
    getComboList();
    $("#keyword").keyup(function (){
        getComboList();
    });
    //删除用户
    var delEvent = function (comuuid){
        layer.confirm('确认删除？', {
            btn: ['是', '否']
        }, function () {
            $.ajax({
                type: 'post',
                dataType: "JSON",
                url: '/comb/delComb',
                data: {
                    comuuid: comuuid
                },
                success: function () {
                    layer.msg('成功删除', {icon: 6});
                    getComboList();
                }/*,
                error:function () {
                    alert("failure");
                }*/
            });
        }, function () {
        });
    }
    //批量删除套餐
    $("#checkAll").bind("click", function () {
        $("input:checkbox[class='inputBox']").prop("checked", this.checked);
    });
    //给批量删除的button绑定点击事件
    var batchDelete = function (comuuidList) {
        layer.confirm('确认删除吗？', {
                    btn: ['残忍删除', '我再想想']
                },
                function () {
                    $.ajax({
                        url: '/comb/delCombos',
                        type: 'POST',
                        data: {
                            comuuidList: comuuidList
                        },
                        success: function () {
                            layer.msg("删除成功", {icon: 6});
                            getComboList();
                            /*状态复原*/
                            $("input:checkbox").prop("checked", false);
                        },
                        error: function () {
                            alert("failure");
                            location.reload();
                        }
                    });
                },
                function () {
                    window.location.reload()
                }
        );
    };
    $("#delCombos").click(function () {
        var checkedNum = $("input[type='checkbox']:checked[class='inputBox']").length;
        if (checkedNum == 0) {
            layer.msg("请至少选择一项!", {icon: 6});
            return false;
        }
        var comuuidList = new Array();
        //给每一个选中的标签都绑定一个方法
        $("input[type='checkbox']:checked[class='inputBox']").each(function () {
            //将标签的值放入数组中
            comuuidList.push($(this).val());//此处添加不能使用add  add不是一个function
        });
        console.log(comuuidList);
        batchDelete(comuuidList);
    });//修改套餐
    var updateEvent = function (comuuid) {
        layer.open({
            type: 2,
            title: '修改保险信息',
            shadeClose: true,
            shade: false,
            maxMin: true,
            area: ['900px', '560px'],
            content: '/comb/toUpdateCombo?comuuid=' + comuuid,
            end: function () {
                getInsurcateList();
            }
        });
    }


</script>